<template>
  <view class="setName">
    <input class="input" v-model="userData.nickname" maxlength="50" />
    <view class="save" @click="editUserInfo">保存</view>
    <view class="quxiao" @click="toBack">取消</view>
  </view>
</template>
<script>
import { mapActions } from 'vuex';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data: () => ({
    userData: [],
  }),
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad() {
    this.userData = this.$Route.query.userData;
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    ...mapActions(['getUserInfo']),
    // 修改信息
    editUserInfo() {
      let that = this;
      if (!that.userData.nickname) {
        this.$u.toast('昵称不能为空');
        return false;
      }
      that
        .$http(
          'user.profile',
          {
            nickname: that.userData.nickname,
            birthday: that.userData.birthday,
            avatar: that.userData.fileUrl,
            gender: that.userData.gender,
          },
          '保存中...'
        )
        .then(async (res) => {
          if (res.code === 1) {
            await that.getUserInfo();
            uni.showToast({
              title: '保存成功',
              duration: 2000,
              icon: 'none',
            });
          }
        });
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.setName {
  .input {
    width: 100%;
    height: 109rpx;
    background-color: #fff;
    margin-top: 85rpx;
    margin-bottom: 339rpx;
    padding-left: 31rpx;
    font-size: 30rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #3d3d3d;
  }
  .save {
    width: 640rpx;
    height: 88rpx;
    background: linear-gradient(to right, #a085f0, #80abf9);
    border-radius: 44rpx;
    margin-left: 55rpx;
    margin-right: 55rpx;
    margin-bottom: 30rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 30rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
  .quxiao {
    width: 640rpx;
    height: 88rpx;
    background: #fff;
    border-radius: 44rpx;
    margin-left: 55rpx;
    margin-right: 55rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 30rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #979797;
  }
}
</style>
